<div class="account-container well">
  <iotek-toast [toastConfig]="toastConfig"></iotek-toast>
  <div class="row search">
    <div class="col-md-4 col-sm-12">
      <span>每页</span>
      <select class="page-size" [(ngModel)]="pageSize" (ngModelChange)="reloadPage($event)" required>
        <option *ngFor="let ps of pageSizeSelect" [value]="ps" selected = "pageSize == ps">{{ps}}</option>
      </select>
      <span>条</span>
    </div>
    <div class="col-md-4 col-sm-12">
      <button class="btn btn-primary" (click)="openpop(true)">创建新用户</button>
    </div>
    <div class="col-md-4  col-sm-12">
      <input type="text" class="form-control" placeholder="输入用户名" [(ngModel)]="keywords" (keyup.enter)="search()" (input)="onSearchInput($event.target.value)">
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 col-sm-12 col-lg-12">
      <div class="table-responsive">
        <table class="table table-hover table-striped">
          <thead>
          <tr>
            <th (click)="orderList(1)">所属角色<i [ngClass] ="setOrderClass(1)"></i></th>
            <th (click)="orderList(2)">用户名<i [ngClass] ="setOrderClass(2)"></i></th>
            <th (click)="orderList(3)">手机号<i [ngClass] ="setOrderClass(3)"></i></th>
            <th (click)="orderList(4)">创建时间<i [ngClass] ="setOrderClass(4)"></i></th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor = "let account of accounts">
            <td>{{account.roleName}}</td>
            <td>{{account.username}}</td>
            <td>{{account.phoneNumber}}</td>
            <td>{{account.createTime}}</td>
            <td class="table-action">
              <a><i class="fa fa-pencil" (click)="openpop(false,account)" ></i></a>
              <a><i class="fa fa-trash-o" (click)="delete(account)"></i></a>
            </td>
          </tr>
          </tbody>
        </table>
        <iotek-pagenation [paginationConfig]="pager"></iotek-pagenation>
      </div><!-- table-responsive -->
    </div>
  </div>
</div>

<iotek-account-popover *ngIf="!isClosed" (onclose)="close($event)" [title] = "title" [account] = "account" [rolesList]="rolesList"></iotek-account-popover>
